<template>
	<tm-fullView>
		<view>
			<tm-menubars title="单选框" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-50 ">
					基础示例
				</view>
				<view><tm-radio v-model="checked" label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选"></tm-radio></view>
				
				<tm-radio v-model="checked" label="单选"></tm-radio>
				<tm-radio color="green" v-model="checked" label="我"></tm-radio>
				<tm-radio  color="bg-gradient-blue-accent" v-model="checked" label="单选" model="round">
				</tm-radio>
				<tm-radio  color="bg-gradient-pink-accent" v-model="checked" label="单选" model="round"
					round="rounded"></tm-radio>
				<view>
					<tm-radio :size="64" color="bg-gradient-red-accent" v-model="checked" label="大号"
						model="round" round="rounded"></tm-radio>
		
				</view>
				
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-50">
					应用场景和外形
				</view>
				<tm-radio dense v-model="checked_1">
					<template #default="{checkData}">
						<tm-button  :theme="(checkData.checked?'bg-gradient-pink-accent':'grey')" :plan="!checkData.checked">
							选我
						</tm-button>
					</template>
				</tm-radio>
		
				<tm-radio dense v-model="checked_1">
					<template v-slot:default="{checkData}">
						<tm-button :fllowTheme="false" :theme="checkData.checked?'bg-gradient-orange-accent':'grey-lighten-4'" :shadow="0">
							选我
						</tm-button>
					</template>
				</tm-radio>
				<tm-radio dense v-model="checked_1">
					<template v-slot:default="{checkData}">
						<tm-button :fllowTheme="false" theme="grey-lighten-4" :shadow="0">
							<tm-radio  color="bg-gradient-pink-accent" v-model="checkData.checked"
								model="round" round="rounded"></tm-radio>
							按钮状态
						</tm-button>
					</template>
				</tm-radio>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-50">
					单选框纵组
					<view>{{JSON.stringify(groupchecked)}}</view>
				</view>
				<tm-groupradio @change="change">
					<tm-radio dense v-model="groupchecked.c_1">
						<template v-slot:default="{checkData}">
							<tm-button size="m" :theme="checkData.checked?'bg-gradient-pink-accent':'grey'"
								:plan="!checkData.checked">选我</tm-button>
						</template>
					</tm-radio>
		
					<tm-radio disabled dense v-model="groupchecked.c_2">
						<template v-slot:default="{checkData}">
							<tm-button size="m" :theme="checkData.checked?'bg-gradient-pink-accent':'grey-lighten-4'"
								:shadow="0">禁用</tm-button>
						</template>
					</tm-radio>
					<tm-radio dense v-model="groupchecked.c_3">
						<template v-slot:default="{checkData}">
							<tm-button size="m" :theme="checkData.checked?'bg-gradient-green-accent':'grey-lighten-4'"
								:shadow="0">选我</tm-button>
						</template>
					</tm-radio>
				</tm-groupradio>
			</tm-sheet>
		
			<tm-sheet color="blue text">
				<view class="text-size-s text-weight-b mb-24 ">应用场景</view>
		
				<tm-grouplist :margin="16" :shadow="24">
					<tm-radio :inline="false" dense border-color="blue" color="bg-gradient-blue-accent"
						v-model="groupchecked.c_1">
						<view class="fulled">
							<tm-listitem right-icon-color="blue" :right-icon="groupchecked.c_1?'icon-check':''" :margin="[0,0]" class-style="round-b-0 " title="不同的选择样式"></tm-listitem>
						</view>
					</tm-radio>
					<tm-listitem title="我被禁用">
						<template v-slot:rightIcon="">
							<tm-radio disabled dense border-color="blue" color="bg-gradient-blue-accent"
								v-model="groupchecked.c_2"></tm-radio>
						</template>
					</tm-listitem>
					<tm-listitem title="我被禁用">
						<template v-slot:rightIcon="">
							<tm-radio dense color="bg-gradient-blue-accent"
								v-model="groupchecked.c_3"></tm-radio>
						</template>
					</tm-listitem>
				</tm-grouplist>
		
			</tm-sheet>
		
		
		</view>
	</tm-fullView>
	
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmGroupradio from "@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue"
	import tmRadio from "@/tm-vuetify/components/tm-radio/tm-radio.vue"
	
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmGrouplist,tmListitem,tmGroupradio,tmRadio},
		data() {
			return {
				checked: false,
				checked_1: false,
				groupchecked: {
					c_1: false,
					c_2: false,
					c_3: false,
				}
			}
		},
		methods: {
			change(e) {
				console.log(JSON.stringify(this.groupchecked));
			}
		}
	}
</script>

<style>

</style>
